<script setup>
import adminApi from '@/api/adminApi';
import {reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import {Search} from "@element-plus/icons-vue";


const logs = ref([]);

// 分页信息
const pageInfo = reactive({
  page: 1,
  limit: 10,
  total: 0,
})


loadLogs();
function loadLogs() {
  adminApi.getAllLog(pageInfo).then(result => {
    logs.value = result.data.records;
    pageInfo.total = result.data.total;
  });
}

// 编辑的操作

function handleDelete(row) {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    adminApi.deleteLogById(row.id).then(result => {
      if (result.code == 200) {
        ElMessage({message: '删除成功！', type: 'success'})
        loadLogs();
      } else {
        ElMessage.error(result.data);
      }
    })
  })
}


function onSearch() {
  pageInfo.page = 1;
  loadLogs();
}




</script>

<template>
  <div class="content">
    <el-form :model="pageInfo" :inline="true">
      <el-form-item label="方法名" :label-width="60">
        <el-input v-model="pageInfo.name" placeholder="请输入方法名"/>
      </el-form-item>
      <el-form-item label="耗时" :label-width="60">
        <el-input v-model="pageInfo.longTime" placeholder="请输入耗时"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">
          <el-icon>
            <Search></Search>
          </el-icon>
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="logs" :stripe="true" :border="true" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"/>
      <el-table-column prop="userName" label="处理人"/>
      <el-table-column prop="allName" label="操作类名" width="180"/>
      <!--      展示一个隐藏的密码-->
      <el-table-column prop="name" label="方法名" width="180" />
      <el-table-column prop="operationTime" label="操作的时间" width="180"/>
      <el-table-column prop="longTime" label="耗时" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
                   :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
                   layout="total, sizes, prev, pager, next, jumper" @change="loadLogs"/>
  </div>






</template>

<style>

</style>